<template>
  <div class="home-container">
    <div class="homeRouteContent" v-show="showChildView">
      <transition name="fade">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    <div class="shop-list" v-show="!showChildView">
      <div class="swipe-wrapper">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(item, index) in swipedata" v-bind:key="index">
            <div class="swipe_item">
              <img :src="item.imgurl" width="100%" height="100%">
            </div>
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="shoplist-wrapper">
        <zl-scrollerView ref="scroll"
                         :data="shops"
                         :scrollbar="false"
                         :click="true"
                         :probeType="3"
                         :pullDownRefresh="pullDownRefreshObj"
                         :pullUpLoad="pullUpLoadObj"
                         :startY="parseInt(startY)"
                         @pullingDown="onPullingDown"
                         @pullingUp="onPullingUp">
          <ul>
            <li v-for="shop in shops" class="shop-item" @click="openShopDetail(shop, $event)">
              <div class="icon">
                <img v-lazy="shop.avatar" width="57">
              </div>
              <div class="content">
                <h2 class="name">{{shop.name}}</h2>
                <div class="extra">
                  <span class="count">月售999单</span><span class="count">好评率</span>
                </div>
                <div class="price">
                  <span class="nowprice">￥20起送/配送费5元</span>
                </div>
              </div>
            </li>
          </ul>
        </zl-scrollerView>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {Swipe, SwipeItem} from 'mint-ui';
  import router from '@/router';
  import {mapMutations, mapGetters, mapActions} from 'vuex';
  import scrollerView from '@/components/scrollerView/scrollerView.vue';

  export default {
    components: {'mt-swipe': Swipe, 'mt-swipe-item': SwipeItem, 'zl-scrollerView': scrollerView},
    name: 'home',
    data() {
      return {
        // todo 从服务器获取
        swipedata: [
          {imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503911327231&di=fb56e87dd00f520cde696c8bd947f5ea&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3c6d55fbb2fb43160c1f9b5422a4462309f7d398.jpg'},
          {imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503911349914&di=c52dfb35731aea5a3b6351bdc88f98db&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_4_151792236D940514536_23.jpg'},
          {imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503911692612&di=c85fd41b49e7cadbef77ad63540c443a&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_3_322403896D814023749_23.jpg'},
          {imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503911448988&di=af3ca9f4f6b08e7f060757e0e23c8b0e&imgtype=0&src=http%3A%2F%2Fb1-q.mafengwo.net%2Fs9%2FM00%2FA3%2FBD%2FwKgBs1fskgyAZvFCAAOETE0w1V000.jpeg%3FimageMogr2%2Fthumbnail%2F%2521440x260r%2Fgravity%2FCenter%2Fcrop%2F%2521440x260%2Fquality%2F100'},
          {imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504506202&di=f8941d3579297d343ed9730b47ab4f1b&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.gamemei.com%2Fbackground%2Fuploads%2Fallimg%2F20160615%2F1465971447224613.jpg'},
          {imgurl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3178073339,3515283158&fm=26&gp=0.jpg'},
          {imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503911536087&di=0f9bc15dd5f397e909967252fe1fe991&imgtype=0&src=http%3A%2F%2Fwww.deskier.com%2Fuploads%2Fallimg%2F161028%2F1-16102Q43610.jpg'},
          {imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504506533&di=616b5fe2889d779159aa5b18bddcb53b&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.enjoyz.com%2F2015%2F0127%2F20150127061404507.jpg'},
          {imgurl: ''},
          {imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503911630982&di=ed25bb68f2a91a7f3f92770465d39136&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_2_1892948922D2632175172_21.jpg'}
        ],
        showChildView: false,
        pullDownRefresh: true,
        pullDownRefreshThreshold: 90, // 下拉90px 触发刷新
        pullDownRefreshStop: 40, // 刷新时回弹到40px  也就是说50px 的刷新loading显示空间
        pullUpLoad: false,
        pullUpLoadThreshold: 50,
        startY: 0
      };
    },
    created() {
      this.initGlobalData(this.authData);
    },
    computed: {
      ...mapGetters([
        'shops', 'initDataCompleted', 'authData'
      ]),
      pullDownRefreshObj: function () {
        let result = this.pullDownRefresh ? {
          threshold: parseInt(this.pullDownRefreshThreshold),
          stop: parseInt(this.pullDownRefreshStop)
        } : false;
        console.log(result);
        return result;
      },
      pullUpLoadObj: function () {
        return this.pullUpLoad ? {threshold: parseInt(this.pullUpLoadThreshold)} : false;
      }
    },
    watch: {
      pullDownRefreshObj() {
        this.rebuildScroll();
      },
      '$route'(to, from) {
        if (from.matched.length >= to.matched.length) {
          this.showChildView = false;
        } else {
          this.showChildView = true;
        }
        console.log(this.showChildView);
      }
    },
    methods: {
      rebuildScroll() {
        this.$nextTick(() => {
          this.$refs.scroll.destroy();
          this.$refs.scroll.initScroll();
        });
      },
      onPullingDown() {
        this.refreshShops();
      },
      onPullingUp() {
        // 瀑布流加载。
      },
      ...mapMutations([
        'SET_SELECTEDSHOP'
      ]),
      ...mapActions([
        'initGlobalData', 'refreshShops'
      ]),
      openShopDetail(shop, event) {
        this.showChildView = true;
        this.SET_SELECTEDSHOP(shop);
        router.push({path: '/home/productlist'});
      }
    }
  };
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin.styl'
  .home-container
    position relative
    height: 100%
    .shop-list
      position relative
      height: 100%;
      width 100%
      .swipe-wrapper
        z-index 1001
        background-color white
        position absolute
        top 0
        width 100%
        height 160px
        .swipe_item
          height 100%
      .shoplist-wrapper
        position absolute
        top 160px
        bottom 0px
        width 100%
        .shop-item
          display flex
          padding 18px
          background-color #fff
          border-after-1px(rgba(7, 17, 27, 0.1))
          &:last-child
            border-none()
            margin-bottom 0px
          .icon
            flex 0 0 57px
            margin-right 10px
          .content
            flex 1
            .name
              margin 2px 0 8px 0
              font-size 14px
              line-height 14px
              height 14px
              color rgb(7, 17, 27)
            .desc, .extra
              font-size 10px
              color rgb(147, 153, 159)
              line-height 10px
              height 10px
              margin-top 8px
            .extra
              .count
                margin-right 12px
            .price
              font-weight 700px
              line-height 24px
              .nowprice
                margin-right 8px
                font-size 14px
                color rgb(240, 20, 20)
              .oldprice
                font-size 10px
                color rgb(147, 153, 159)
                text-decoration line-through
            .cart-wrapper
              position: absolute
              right 0
              bottom 12px
    /* .shopScrollWrapper
       position absolute
       overflow hidden
       top 0px
       bottom 0px
       width 100%
       height: 100% */

    /*三级路由容器占满全屏*/
    .homeRouteContent
      position fixed
      top 0
      bottom 0
      width 100%
</style>
